<div>
  <h2 class="screenreader-only">{{t "Graphs"}}</h2>
  <div class="grid-row end-xs">
    <div class="col-xs-2">
      <div class="AnalyticsToggle ic-Form-control">
        <label class="ic-Super-toggle--ui-switch">
          <input type="checkbox" id="graph_table_toggle" class="ic-Super-toggle__input" aria-label="{{t "View analytics data in tables instead of graphs" }}">
          <div class="ic-Super-toggle__container" aria-hidden="true">
            <div class="ic-Super-toggle__option--LEFT">
              <i class="icon-stats"></i>
            </div>
            <div class="ic-Super-toggle__switch"></div>
            <div class="ic-Super-toggle__option--RIGHT">
              <i class="icon-table"></i>
            </div>
           </div>
         </label>
      </div>
    </div>
  </div>

  <div class="course_graphs">
    <div class="legend_row">
      <h3>{{t "Activity by Date"}}</h3>
      <div class="graph_legend" aria-hidden="true">
        <span class="legend_entry"><span class="legend_swatch page_views"></span>{{t "Page Views Only"}}</span>
        <span class="legend_entry"><span class="legend_swatch participation"></span>{{t "Participation"}}</span>
      </div>
    </div>
    <div class="graph_container">
      <span id="participating-graph-label" class="screenreader-only">{{t "Graph of student page views and participation over time"}}</span>
      <div role="img" aria-labelledby="participating-graph-label">
        <div class="graph" id="participating-graph" aria-hidden="true"/>
      </div>
    </div>
    <div id="activities-table" style="display:none"/>

    <div class="legend_row">
      <h3>{{t "Submissions"}}</h3>
      <div class="graph_legend" aria-hidden="true">
        <span class="legend_entry"><span class="legend_swatch missing"></span>{{t "Missing"}}</span>
        <span class="legend_entry"><span class="legend_swatch late"></span>{{t "Late"}}</span>
        <span class="legend_entry"><span class="legend_swatch onTime"></span>{{t "On Time"}}</span>
      </div>
    </div>
    <div class="graph_container">
      <span id="finishing-assignments-graph-label" class="screenreader-only">{{t "Graph showing the fraction of on-time submissions for each assignment"}}</span>
      <div role="img" aria-labelledby="finishing-assignments-graph-label">
        <div class="graph" id="finishing-assignments-graph" aria-hidden="true"/>
      </div>
    </div>
    <div id="submissions-table" style="display:none"/>

    <div class="legend_row">
      <h3>{{t "Grades"}}</h3>
      <div class="graph_legend" aria-hidden="true">
        <span class="legend_entry"><span class="legend_swatch totalRange outlined"><span></span></span>{{t "Total Range"}}</span>
        <span class="legend_entry"><span class="legend_swatch pc25-75"></span>{{t "25th-75th Percentile"}}</span>
        <span class="legend_entry"><span class="legend_swatch median outlined"><span></span></span>{{t "Median"}}</span>
      </div>
    </div>
    <div class="graph_container">
      <span id="grades-graph-label" class="screenreader-only">{{t "Graph of grades for each assignment"}}</span>
      <div role="img" aria-labelledby="grades-graph-label">
        <div class="graph" id="grades-graph" aria-hidden="true"/>
      </div>
    </div>
    <div id="grades-table" style="display:none"/>
  </div>

  <div id='students'>
    <table class='ic-Table ic-Table--hover-row'>
      <caption id="student_table_caption" class="screenreader-only">
        {{#t "student_summary.not_sorted"}}Student summary table{{/t}}
      </caption>
      <thead>
        <tr>
          <th scope='col' role='columnheader' class='student' aria-sort='ascending'>
            <span class='sortable' data-sort_key='name' role='button' tabindex='0'>
              {{t "Student"}}
              <span class='screenreader-only'>{{t "sorted ascending."}}</span>
            </span>
          </th>
          <th scope='col' role='columnheader' aria-sort='none'>
            <span class='sortable' data-sort_key='page_views' role='button' tabindex='0'>
              {{t "Page Views"}}
              <span class='screenreader-only'>{{t "Click to sort."}}</span>
            </span>
          </th>
          <th scope='col' role='columnheader' aria-sort='none'>
            <span class='sortable' data-sort_key='participations' role='button' tabindex='0'>
              {{t "Participations"}}
              <span class='screenreader-only'>{{t "Click to sort."}}</span>
            </span>
          </th>
          <th scope='col' role='columnheader'><span>{{t "Submissions"}}</span></th>
          <th scope='col' role='columnheader'><span>{{t "On Time"}}</span></th>
          <th scope='col' role='columnheader'><span>{{t "Late"}}</span></th>
          <th scope='col' role='columnheader'><span>{{t "Missing"}}</span></th>
          <th scope='col' role='columnheader' aria-sort='none'>
            <span class='sortable' data-sort_key='score' role='button' tabindex='0'>
              {{t "Current Score"}}
              <span class='screenreader-only'>{{t "Click to sort."}}</span>
            </span>
          </th>
        </tr>
      </thead>

      <tbody class='rows' />
    </table>
  </div>
</div>
